<meta meta="引导页配置" args="data"/>
<style>

</style>
<div>
    <form id="form" s-data="data" s="valid,datac,nda" class="m-b-xs form-horizontal">
       <div class="form-group">
           <label class="control-label col-sm-3">持续时间(s）： </label>
           <label class="control-label col-sm-9"><input autocomplete="off" type="number" s-valid-error="require(),number()" class="form-control" placeholder="持续时间" name="timeout" /></label>
       </div>
        <div class="form-group">
            <label class="control-label col-sm-3">进入按钮文字： </label>
            <label class="control-label col-sm-9"><input autocomplete="off" type="text" s-valid-error="require()" class="form-control" placeholder="进入按钮文字" name="enterBtnText" /></label>
        </div>
    </form>
    <div class="m-b-xs">
        <div class="btn-group">
            <a href="javascript:;" class="btn btn-default btn-xs"
               s-click="add()">
                <i class="fa fa-plus"></i> 新增
            </a>
        </div>
        <a href="javascript:;" class="btn btn-default btn-xs s-loading-icon "
           s-click="return $bootAdvsGrid.refresh()">
            <i class="fa fa-refresh s-loading-spinner"></i>
        </a>
        <span class="label label-warning">拖动图标进行排序</span>
    </div>
    <div id="bootAdvsGrid"
         s='datac,nda'
         s-data-filter="'picList'"
         s-data="data">
        <table class="table table-middle table-striped table-hover table-bordered table-condensed" style="width: 100%;">
            <tr>
                <th>图片</th>
                <th>标题/标语</th>
                <th>页面</th>
                <th>参数</th>
                <th class="text-right">操作</th>
            </tr>
            <tbody s="loop" id="bootAdvList">
            <tr s-loop-role="empty">
                <td colspan="5">
                    <div class="p text-center">
                        未查询到数据
                    </div>
                </td>
            </tr>
            <tr s-loop-role="row" class="data-row" s="datac" s-check-role="i">
                <td s="tpl">
                    <img class="sorthandle" src="{%=this.picUrl%}" style="max-width: 150px; max-height: 100px;"/>
                </td>
                <td>
                    <div name="title"></div>
                    <label class="label label-warning" name="slogan"></label>
                </td>
                <td name="pageTitle"></td>
                <td name="params" style="max-width: 200px; word-break: break-all"></td>
                <td class="text-right">
                    <input autocomplete="off" type="button" class="btn btn-xs btn-link" s-click="del(this)" value="删除"/>
                    <input autocomplete="off" type="button" class="btn btn-xs btn-link" s-click="edit(this)" value="编辑"/>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script type="text/javascript">
    $bootAdvList.node.sortable({
        handle: ".sorthandle",
        update: function() {
            // save()
        }
    });
    function edit(s) {
        S.popupOpen("/operation-center/picAdv.html", {picAdv: s.parent().data()}).done(function (rs) {
            rs && s.parent().data(rs);
        });
    }

    function add() {
        S.popupOpen("/operation-center/picAdv.html").done(function (rs) {
            rs && $bootAdvList.addRow(rs, 'append')
        });
    }

    function del(s) {
        s.node.closest("tr").remove();
    }

    // function save() {
    //     var bootAdvList = [];
    //     $bootAdvList.node.find(".data-row").each(function() {
    //         var tr = $(this);
    //         var $tr = Smart.of(tr);
    //         var data = $tr.data();
    //         bootAdvList.push(data);
    //     })
    //     S.post("/api/setting", {
    //         key: 'IndexBannerSetting',
    //         version: version,
    //         content: JSON.stringify({
    //             bootAdvList: bootAdvList
    //         })
    //     }).done(function() {
    //         S.toast("保存成功", 'success');
    //     })
    // }

    S.getContent = function() {
        var deferred = $.Deferred();
        $form.validate().done(function() {
            var bootAdvList = [];
            $bootAdvList.node.find(".data-row").each(function() {
                var tr = $(this);
                var $tr = Smart.of(tr);
                var data = $tr.data();
                bootAdvList.push(data);
            })
            var obj = Smart.serializeToObject($form.node);
            obj.picList = bootAdvList
            deferred.resolve(obj)
        })
        return deferred;
    }
</script>